<template>
    <!-- 新增编辑弹窗 -->
    <el-dialog v-model="dialogUserRole" @close="cancel" width="1000px">
      <template #header>
        <div class="header-title">{{titleType}}账单核销</div>
      </template>
      <div class="titie-main">
        <div class="titie-main-fl">账单信息</div>
      </div>
      <el-table stripe :data="dataList" style="margin-bottom: 20px;">
        <template v-for="item in columns" :key="item.key">
          <el-table-column v-if="item.visible" :label="item.label" align="center"
                :prop="item.key" :fixed="item?.fixed" :width="item?.width">
          </el-table-column>
        </template>
      </el-table>
      <div class="titie-main">
        <div class="titie-main-fl">核销信息</div>
      </div>
      <el-form  :model="form" :rules="rules" ref="formRef" label-width="90px">
        <div style="display: flex;flex-wrap: wrap;">
          <el-form-item label="收款金额" :prop="form.currency=='CNY' ? 'amountCny':'amountUsd'">
            <div class="input-sel" style="display: flex;">
              <el-select v-model="form.currency" style="width: 60px" placeholder="请选择">
                <el-option v-for="item in feeCurrencyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
              <el-input type='number' v-if="form.currency=='CNY'" :disabled="form.writeOffWay==10" v-model.trim="form.amountCny" style="width: 130px" placeholder="请输入收款金额" maxlength="20" />
              <el-input type='number' v-else-if="form.currency=='USD'" :disabled="form.writeOffWay==10" v-model.trim="form.amountUsd" style="width: 130px" placeholder="请输入收款金额" maxlength="20" />
            </div>
          </el-form-item>
          <el-form-item label="收款日期" prop="writeOffTime" >
                <el-date-picker
                  v-model="form.writeOffTime"
                  type="date"
                  placeholder="请选择收款日期"
                />
          </el-form-item>
          <el-form-item label="上传附件" prop="sellOutPrice">
            <el-button :icon="Upload" @click="uploadTap">
              <template v-if="!form.billUrl?.length">上传附件</template>
              <template v-else>查看附件</template> 
            </el-button>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="form.remark" :formatter="containsEmoji" placeholder="请输入备注" maxlength="100" />
          </el-form-item>
        </div> 
      </el-form>
      <template #footer>
        <div class="dialog-footer">
            <el-button  @click="cancel()">取消</el-button>
            <el-button type="primary" @click="submitForm(formRef)">确定</el-button>
        </div>
      </template>
      <el-dialog v-model="showFileDialog" title="附件" v-if="showFileDialog" :with-header="false" width="600">
          <!-- <uploadList  @uploadSccess="billWriteOffBeanListUrlChang" :maxLimit="1" :detailFileList="form.billUrl"></uploadList>  -->
          <UploadFilesImages ref="attachmentRef1" :urlList="storageAttachment" :limit="1" :fileSize="3" :showNumber="'4'" :drag="true" :displayType="'2'" :type="'pdf/doc/docx/xls/xlsx/jpg/jpeg/png/zip'" @updateInfo="updateInfo"></UploadFilesImages>
          <el-row justify="center" class="marginTop20">
            <el-col :span="6" class="text-center"><el-button type="primary" plain @click="showFileDialog = false">确定</el-button></el-col>
          </el-row>
      </el-dialog>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { Upload } from '@element-plus/icons-vue'
import { Refresh } from '@element-plus/icons-vue'
import { billsList,writeOffBill ,getBillListAmount} from '@/api/financial/bills'
import uploadList from '@/components/upload/uploadList.vue'
import UploadFilesImages from '@/components/upload/uploadFiles-Images'
import type { FormInstance, FormRules,containsEmoji } from 'element-plus'
const feeCurrencyList = ref([
  {
    value:'CNY',
    label:'¥'
  },
  {
    value:'USD',
    label:'$'
  },
])
const dataList=ref([])
const showFileDialog=ref(false)
const titleType=ref('出租')
const formRef=ref()
const refType=ref(5)
const dialogUserRole=ref(false) //弹框
// const ids=ref([])
const data = reactive({
  form: {
    ids:[],
    currency:'CNY',
    writeOffTime:null,
    amountUsd:null,
    amountCny:null,
    billUrl:[],
    remark:null,
    writeOffWay:5,
  },
  rules: {
    amountUsd: [{ required: true, message: "收款金额不能为空", trigger: "blur" }],
    amountCny: [{ required: true, message: "收款金额不能为空", trigger: "blur" }],
    writeOffTime: [{ required: true, message: "收款日期不能为空", trigger: "blur" }],
  }
});
const { form, rules } = toRefs(data);
const typeLimt=ref(1) //批量2 单独1
const onShow = async (row,refTypeIn,type) => {
  dialogUserRole.value = true
  if(type==1){
    form.value.ids.push(row)
  }else{
    form.value.ids=row
  } 
  if(form.value.ids.length==1){
    form.value.writeOffWay=5

  }else{
    form.value.writeOffWay=10

  }
  typeLimt.value=type
  refType.value=refTypeIn
  // form.value.ids=row.id
  if(refTypeIn==5){
      titleType.value='出租'
    }else if(refTypeIn==10){
      titleType.value='回调'
    }else if(refTypeIn==20){
      titleType.value='出售'
    }  
    storageAttachment.value = []
    getRoleDetail() 
}
// 列显隐信息
const columns = ref([
  {key: 'billNo', label: `账单号`,  width: 150, visible: true,},
  {key: 'boxQuantity', label: `出租箱量（个）`, width: 150, visible: true,},
  {key: 'deductBillCnyAmount', label: `应付金额（¥）`,  width: 150, visible: true},
  {key: 'deductBillUsdAmount', label: `应付金额（$）`, width: 150,visible: true,},
  {key: 'paidBillCnyAmount', label: `已核销金额（¥）`, width: 150, visible: true},
  {key: 'paidBillUsdAmount', label: `已核销金额（$）`, width: 150,visible: true,},
  {key: 'unpaidBillCnyAmount', label: `未核销金额（¥）`, width: 150, visible: true},
  {key: 'unpaidBillUsdAmount', label: `未核销金额（$）`,width: 150, visible: true,},
]);
//详情查询
const getRoleDetail=()=>{
    let data={
      ids: form.value.ids
    }
  getBillListAmount(data).then(res => {
    dataList.value=res.data.billBeanList
    form.value.amountCny=res.data.sumUnpaidBillCnyAmount
    form.value.amountUsd=res.data.sumUnpaidBillUsdAmount
  })
}
//核销上传附件
const uploadTap = () =>{
  showFileDialog.value=true
}
//核销上传附件回显
const billWriteOffBeanListUrlChang=(row)=>{
  form.value.billUrl=row
}
const emits = defineEmits(['verificationMode'])
/** 提交按钮 */
const submitForm = (formEl: FormInstance | undefined) =>{
  if (!formEl) return
  formEl.validate(valid => {
    let dataForm=JSON.parse(JSON.stringify(form.value))
    if (valid) {
      dataForm.billUrl=JSON.stringify(dataForm.billUrl) //附件
      writeOffBill(dataForm).then(response => {
        emits('verificationMode');
        ElMessage.success('核销成功');
        cancel();
      });
    }
  });
};
//关闭弹框
const cancel = () => {
  formRef.value.resetFields()// 重置数据
  form.value.currency='CNY'
  form.value.billUrl=[]
  form.value.remark=null
  form.value.amountUsd=null
  form.value.amountCny=null
  form.value.writeOffWay=5
  form.value.ids=[]
  dialogUserRole.value=false
}
const storageAttachment = ref([])
const updateInfo = (row) =>{
  form.value.billUrl=row
  storageAttachment.value = row
}

defineExpose({ onShow })
</script>

<style scoped>
.choose-item-2 {
  margin-left: 20px;
}
.stust{
  padding:0 20px;
}
.choose-item-3 {
  display: block;
  margin-left: 20px;
}
.main-cent{
  padding: 0 10px;
}
.input-sel {
  border: 1px solid #C0C4CC; 
  border-radius: 4px;
  overflow: hidden;

}
.input-sel :deep(.el-input__wrapper) {
  box-shadow: none !important; /* 去掉阴影 */
  border-radius: 0; /* 去掉圆角 */
  border-left: 1px solid #C0C4CC; /* 默认下边框颜色 */
}
.input-sel :deep(.el-select__wrapper) {
  box-shadow: none !important; /* 去掉阴影 */
  border-radius: 0; 
}
.header-title{
  border-left: 4px solid #2158F3;
  padding-left: 8px;
  line-height: 18px;
}
.titie-main{
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin: 20px 0 10px;
}
.titie-main-fl{
  color: #121317;
  font-weight: bold;
}
</style>